<template>
  <div class="registeres">
    <img src="../assets/toutou.png" style="width:100%;" alt="">
    <div style="display:flex;flex-direction:column;height:100px;justify-content: space-between;align-items:center;margin-top:5%;">
      <div style="display:flex;flex-direction:column;width:70%;margin:0 auto">
        <p style="font-size:16px;">拼多多号：</p>
        <input v-model="rulm.name" class="_input" type="text" style="outline: none;color:#a5a4a4;margin-top:20px;" placeholder="请输入拼多多号">
      </div>
      <div style="display:flex;flex-direction:column;width:70%;margin:10% auto">
        <p style="font-size:16px;margin-bottom:20px;">拼多多号截图：</p>
        <el-upload
          class="upload-demo"
          :headers="imgheader"
          list-type="picture"
          action="/api/v1/register/dyimage_recognition"
          :on-success="handlesuccess">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
    </div>
    <div @click="registering()"
         style="margin:0 auto;margin-top:60%;display:flex;justify-content: center;align-items: center;border:1px solid rgb(45,167,250);height:40px;width:70%;border-radius:40px;">
      <span style="font-size:20px;color:rgb(45,167,250);font-weight:600;">确认绑定</span>
    </div>
  </div>
</template>

<script>
  import {register_pdd} from "../api/api";
  export default {
    data() {
      return {
        rulm: {
          name: "",
          img:""
        },
        imgheader:{token:window.localStorage.getItem('xfq_token')},
      }
    },
    methods: {
      handlesuccess(res){
        this.rulm.img = res.UrlImg
      },
      registering() {
        let params = {
          pddname:this.rulm.name,
          pddimg:this.rulm.img
        }
        register_pdd(params).then(res=>{
          if(res.Status == 200){
            this.$toast(res.Message)
            setTimeout(()=>{
              this.$router.push('/home')
            },1500)
          }else{
            this.$toast(res.Message)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .registeres {
    width: 100%;
    height: 100%;
  }

  ._input{
    font-size:16px;
    border-bottom:1px solid #c5c5c5;
  }
  ._input::placeholder{
    color:#a5a4a4;
    font-size:14px;
  }
  .confirms{
    width:80%;
    font-size: 16px;
    border-radius: 10px;
    height: 40px;
    position: absolute;
    bottom: 5%;
    left:10%;
    display: flex;
    color:black;
    font-weight:600;
    justify-content: center;
    align-items: center;
    background:white;
  }
  .yanzheng {
    background-size:100% 100%;
    background:rgb(45,167,250);
    height:400px;
    width:80%;
    font-size: 18px;
    border-radius:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
